<!-- 动态增减表单 -->
<template>
  <!-- 自定义表单 -->
  <BasicForm @register="registerForm" style="margin-top: 50px; margin-left: 50px" @submit="handleSubmit">
    <!--  添加input的插槽  -->
    <template #addForm="{ field }">
      <a-button v-if="Number(field) === 0" @click="addField" style="width: 50px">+</a-button>
      <a-button v-if="Number(field) > 0" @click="delField(field)" style="width: 50px">-</a-button>
    </template>
  </BasicForm>
  {{ schemas }}
  <!--  <div style="margin: 20px auto; text-align: center">
    <a-button @click="addField">添加表单项</a-button>
  </div>-->
</template>

<script lang="ts" setup>
//引入依赖
import { useForm, BasicForm, FormSchema } from '/@/components/Form';
import { ref } from 'vue';

const props = defineProps({
  isUpdate: {
    default: false,
    type: Boolean
  },
  showFooter: {
    default: false,
    type: Boolean
  }
})

console.log('props', props)

//自定义表单字段
const formSchemas: FormSchema[] = [
  {
    field: 'demandPlanCode',
    label: '需求计划编号',
    component: 'Input',
    compoenntProps: {
      readonly: true
    }
  },
  {
    field: 'demandPlanType',
    label: '需求计划类型',
    component: 'Select',
    componentProps: {
      options: [{
        label: '劳务需求',
        value: 0
      }, {
        label: '设备需求',
        value: 1
      }]
    }
  },
  {
    field: '0',
    component: 'Input',
    // ifShow:false,
    label: '',
    colProps: {
      span: 8,
    },
    slot: 'addForm',
  },
];

/**
 * BasicForm绑定注册;
 * appendSchemaByField:增加表单项（字段）
 *
 * removeSchemaByFiled:减少表单项（字段）
 */
const [registerForm, { appendSchemaByField, removeSchemaByFiled }] = useForm({
  schemas: formSchemas,
  labelWidth: 150,
  showActionButtonGroup: false,
  baseColProps: { span: 24 },
});

//组件个数
let n = ref<number>(0);

/**
 * 添加字段
 * appendSchemaByField类型: ( schema: FormSchema, prefixField: string | undefined, first?: boolean | undefined ) => Promise<void>
 * 说明: 插入到指定 filed 后面，如果没传指定 field，则插入到最后,当 first = true 时插入到第一个位置
 */
async function addField() {
  //添加表单字段，里面为schemas对应的属性，可自行配置
  await appendSchemaByField(
    {
      field: `name${n.value}`,
      component: 'Input',
      label: '字段' + n.value,
      colProps: {
        span: 8,
      },
    },
    ''
  );
  await appendSchemaByField(
    {
      field: `sex${n.value}`,
      component: 'InputNumber',
      label: '字段' + n.value,
      colProps: {
        span: 8,
      },
    },
    ''
  );

  await appendSchemaByField(
    {
      field: `${n.value}`,
      component: 'Input',
      label: ' ',
      colProps: {
        span: 8,
      },
      slot: 'addForm',
    },
    ''
  );
  n.value++;
}

/**
 * 删除字段
 * 类型: (field: string | string[]) => Promise<void>
 * 说明: 根据 field 删除 Schema
 * @param field 当前字段名称
 */
function delField(field) {
  //移除指定字段
  removeSchemaByFiled([`name${field}`, `sex${field}`, `${field}`]);
  n.value--;
}

/**
 * 点击提交按钮的value值
 * @param values
 */
function handleSubmit(values: any) {
  console.log('提交按钮数据::::', values);
}
</script>

<style scoped>
/** 数字输入框样式 */
:deep(.ant-input-number) {
  width: 100%;
}
</style>